<template>
    <div class="wordbooks-pages">
        <van-nav-bar title="管理单词本" left-arrow @click-left="goBack" />
        <div class="wordbooks-page">
            <div class="wordbook-list">
                <div
                    v-for="book in wordbooks"
                    :key="book.id"
                    class="wordbook-card"
                >
                    <img
                        :src="book.img"
                        alt="Word Book Cover"
                        class="wordbook-cover"
                    />
                    <div class="wordbook-name">{{ book.name }}</div>
                    <div class="card-actions">
                        <van-button
                            size="small"
                            type="danger"
                            @click="removeWordbook(book.id)"
                            style="margin-right: 10px"
                            >删除</van-button
                        >
                        <van-button
                            size="small"
                            type="primary"
                            @click="watchWordBook(book)"
                            >查看</van-button
                        >
                    </div>
                </div>
            </div>
            <van-button
                type="primary"
                class="add-wordbook-btn"
                @click="showAddDialog = true"
                >新增单词本</van-button
            >

            <!-- 新增单词本的弹出层 -->
            <van-popup v-model:show="showAddDialog" position="bottom">
                <div class="add-wordbook-form">
                    <van-field
                        v-model="newWordbookName"
                        placeholder="单词本名称"
                    />
                    <!-- <van-field
            v-model="newWordbookCoverUrl"
            placeholder="单词本封面URL"
          /> -->
                    <van-field name="img" label="单词本封面URL">
                        <template #input>
                            <upload v-model="newWordbookCoverUrl" />
                        </template>
                    </van-field>
                    <van-button type="primary" @click="addWordbook"
                        >确认新增</van-button
                    >
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import upload from "@/components/upload";
import {
    wordsCreate,
    getUserWordSet,
    updateWorkds,
    deleteWorkds,
} from "../api/words";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const wordbooks = ref([]);
const showAddDialog = ref(false);
const newWordbookName = ref("");
const newWordbookCoverUrl = ref("");
const user = ref(null);
onMounted(() => {
    user.value = JSON.parse(localStorage.getItem("user"));
    getUserWords();
});
const getUserWords = async () => {
    const res = await getUserWordSet({ user_id: user.value.id });
    console.log(res);
    if (res.success) {
        wordbooks.value = res.data;
    }
};

const goBack = () => {
    router.back();
};

const removeWordbook = (id) => {
    // 删除单词本逻辑
    showConfirmDialog({
        title: "删除",
        message: "是否删除该单词本？",
    })
        .then(async () => {
            const res = await deleteWorkds({ id, user_id: user.value.id });
            console.log(res);
            showNotify({
                type: res.success ? "success" : "danger",
                message: res.message,
            });
            if (res.success) {
                const index = wordbooks.value.findIndex(
                    (book) => book.id === id
                );
                if (index !== -1) {
                    wordbooks.value.splice(index, 1);
                }
            }
        })
        .catch(() => {
            // on cancel
        });
};

const watchWordBook = (book) => {
    console.log("编辑单词本", book);
    store.commit("SAVE_WORD_BOOK", book);
    router.push({
        path: "/watchWordBook",
    });
};

const addWordbook = async () => {
    // 新增单词本逻辑
    if (newWordbookName.value && newWordbookCoverUrl.value) {
        const res = await wordsCreate({
            wordlist: [],
            name: newWordbookName.value,
            img: newWordbookCoverUrl.value,
            user_id: user.value.id,
        });
        console.log(res);
        newWordbookName.value = ""; // 清空输入
        newWordbookCoverUrl.value = ""; // 清空输入
        showAddDialog.value = false; // 关闭弹出层
        showNotify({
            type: res.success ? "success" : "danger",
            message: res.message,
        });
        if (res.success) {
            getUserWords();
        }
    }
};
</script>

<style scoped>
.wordbooks-page {
    padding: 10px;
}

.wordbook-list {
    margin-bottom: 16px;
}

.wordbook-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.wordbook-cover {
    width: 100%;
    display: block;
}

.wordbook-name {
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

.card-actions {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.add-wordbook-btn {
    margin: 0 auto;
    display: block;
    width: 90%;
}

.add-wordbook-form {
    padding: 16px;
}
</style>
